<template>
  <div>
    <el-container>
      <el-main>
        <el-container class="parent-body">
          <el-header class="content-header">
            区域设置
            <div class="return-style">
              <el-button @click="restore">恢复默认设置</el-button>
            </div>
          </el-header>
          <el-main class="info-main">
            <el-container>
              <el-header class="header-style">
                <el-row :gutter="20">
                  <el-col :span="6">
                    <div class="grid-content bg-purple">省/自治区/直辖市</div>
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple">地级市</div>
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple">市辖区/县/县级市</div>
                  </el-col>
                  <el-col :span="6">
                    <div class="grid-content bg-purple">乡/镇/街道</div>
                  </el-col>
                </el-row>
              </el-header>
              <el-main>
                <el-row :gutter="20">
                  <el-col class="border-style" :span="6">
                    <div
                      v-for="item in provinceList"
                      style="cursor: pointer;"
                      class="grid-content bg-purple"
                      @click="addStyle('01',$event)"
                      :class="{'selected-style': item.id === selected01}"
                      :key="item.id"
                      :id="item.id"
                    >{{item.name}}</div>
                    <el-input
                      ref="inputRef01"
                      v-show="show01"
                      maxlength="12"
                      style="margin:10px 0;"
                      v-model="input01"
                    >
                      <div slot="suffix">
                        <span
                          style="position: relative;top:8px;left:-5px;color:#0099FF;cursor: pointer;"
                          @click="save('01')"
                        >保存</span>
                        <span
                          style="position: relative;top:8px;color:#0099FF;cursor: pointer;"
                          @click="cancel('01')"
                        >取消</span>
                      </div>
                    </el-input>
                    <el-button class="add-button" @click="add('01')">新增</el-button>
                  </el-col>
                  <el-col class="border-style" :span="6">
                    <div
                      v-for="item in prefectureLevelList"
                      style="cursor: pointer;"
                      class="grid-content bg-purple"
                      @click="addStyle('02',$event)"
                      :class="{'selected-style': item.id === selected02}"
                      :key="item.id"
                      :id="item.id"
                    >{{item.name}}</div>
                    <el-input
                      ref="inputRef02"
                      v-show="show02"
                      maxlength="12"
                      style="margin:10px 0;"
                      v-model="input02"
                    >
                      <div slot="suffix">
                        <span
                          style="position: relative;top:8px;left:-5px;color:#0099FF;cursor: pointer;"
                          @click="save('02')"
                        >保存</span>
                        <span
                          style="position: relative;top:8px;color:#0099FF;cursor: pointer;"
                          @click="cancel('02')"
                        >取消</span>
                      </div>
                    </el-input>
                    <el-button class="add-button" @click="add('02')">新增</el-button>
                  </el-col>
                  <el-col class="border-style" :span="6">
                    <div
                      v-for="item in countyList"
                      style="cursor: pointer;"
                      class="grid-content bg-purple"
                      @click="addStyle('03',$event)"
                      :class="{'selected-style': item.id === selected03}"
                      :key="item.id"
                      :id="item.id"
                    >{{item.name}}</div>
                    <el-input
                      ref="inputRef03"
                      v-show="show03"
                      maxlength="12"
                      style="margin:10px 0;"
                      v-model="input03"
                    >
                      <div slot="suffix">
                        <span
                          style="position: relative;top:8px;left:-5px;color:#0099FF;cursor: pointer;"
                          @click="save('03')"
                        >保存</span>
                        <span
                          style="position: relative;top:8px;color:#0099FF;cursor: pointer;"
                          @click="cancel('03')"
                        >取消</span>
                      </div>
                    </el-input>
                    <el-button class="add-button" @click="add('03')">新增</el-button>
                  </el-col>
                  <el-col class="border-style" :span="6">
                    <div
                      v-for="item in townList"
                      style="cursor: pointer;"
                      class="grid-content bg-purple"
                      @click="addStyle('04',$event)"
                      :class="{'selected-style': item.id === selected04}"
                      :key="item.id"
                      :id="item.id"
                    >{{item.name}}</div>
                    <el-input
                      ref="inputRef04"
                      v-show="show04"
                      maxlength="12"
                      style="margin:10px 0;"
                      v-model="input04"
                    >
                      <div slot="suffix">
                        <span
                          style="position: relative;top:8px;left:-5px;color:#0099FF;cursor: pointer;"
                          @click="save('04')"
                        >保存</span>
                        <span
                          style="position: relative;top:8px;color:#0099FF;cursor: pointer;"
                          @click="cancel('04')"
                        >取消</span>
                      </div>
                    </el-input>
                    <el-button class="add-button" @click="add('04')">新增</el-button>
                  </el-col>
                </el-row>
              </el-main>
            </el-container>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import areaApi from "@/api/settings/area";
export default {
  data() {
    return {
      provinceList: [],
      prefectureLevelList: [],
      countyList: [],
      townList: [],
      input01: "",
      show01: false,
      input02: "",
      show02: false,
      input03: "",
      show03: false,
      input04: "",
      show04: false,
      selected01: null,
      selected02: null,
      selected03: null,
      selected04: null
    };
  },
  methods: {
    initData() {
      areaApi.findAreas().then(response => {
        this.provinceList = response.data.data;
        if (this.provinceList.length > 0) {
          if (this.selected01 == null) {
            this.selected01 = this.provinceList[0].id;
          }
          this.prefectureLevelList = this.provinceList.filter(
            province => province.id === this.selected01
          )[0].children;
        }
        if (this.prefectureLevelList.length > 0) {
          if (this.selected02 == null) {
            this.selected02 = this.prefectureLevelList[0].id;
          }
          this.countyList = this.prefectureLevelList.filter(
            item => item.id === this.selected02
          )[0].children;
        }
        if (this.countyList.length > 0) {
          if (this.selected03 == null) {
            this.selected03 = this.countyList[0].id;
          }
          this.townList = this.countyList.filter(
            item => item.id === this.selected03
          )[0].children;
        }
        if (this.townList.length > 0) {
          this.selected04 = this.townList[0].id;
        }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("提交成功!");
        } else {
          return false;
        }
      });
    },
    submitUpload() {
      this.$refs.upload3.submit();
    },
    add(num) {
      if (num == "01") {
        if (this.show01) {
          this.$refs.inputRef01.focus();
        } else {
          this.show01 = true;
        }
      } else if (num == "02") {
        if (this.show02) {
          this.$refs.inputRef02.focus();
        } else {
          this.show02 = true;
        }
      } else if (num == "03") {
        if (this.show03) {
          this.$refs.inputRef03.focus();
        } else {
          this.show03 = true;
        }
      } else if (num == "04") {
        if (this.show04) {
          this.$refs.inputRef04.focus();
        } else {
          this.show04 = true;
        }
      }
    },
    save(num) {
      if (num == "01") {
        if (this.input01 == "") {
          this.$message({
            message: "请填写信息",
            type: "warning"
          });
          return;
        }
        areaApi.addArea(this.input01, 0, 1).then(() => {
          this.initData();
        });
        this.input01 = "";
        this.show01 = false;
      } else if (num == "02" && this.selected01 > 0) {
        if (this.input02 == "") {
          this.$message({
            message: "请填写信息",
            type: "warning"
          });
          return;
        }
        areaApi.addArea(this.input02, this.selected01, 2).then(() => {
          this.initData();
        });
        this.input02 = "";
        this.show02 = false;
      } else if (num == "03" && this.selected02 > 0) {
        if (this.input03 == "") {
          this.$message({
            message: "请填写信息",
            type: "warning"
          });
          return;
        }
        areaApi.addArea(this.input03, this.selected02, 3).then(() => {
          this.initData();
        });
        this.input03 = "";
        this.show03 = false;
      } else if (num == "04" && this.selected03 > 0) {
        if (this.input04 == "") {
          this.$message({
            message: "请填写信息",
            type: "warning"
          });
          return;
        }
        areaApi.addArea(this.input04, this.selected03, 4).then(() => {
          this.initData();
        });
        this.input04 = "";
        this.show04 = false;
      }
    },
    cancel(num) {
      if (num == "01") {
        this.show01 = false;
      } else if (num == "02") {
        this.show02 = false;
      } else if (num == "03") {
        this.show03 = false;
      } else if (num == "04") {
        this.show04 = false;
      }
    },
    addStyle(num, e) {
      if (num == "01") {
        this.selected01 = e.currentTarget.id - 0;
      } else if (num == "02") {
        this.selected02 = e.currentTarget.id - 0;
      } else if (num == "03") {
        this.selected03 = e.currentTarget.id - 0;
      } else if (num == "04") {
        this.selected04 = e.currentTarget.id - 0;
      }
    },
    restore() {
      if (this.provinceList.length > 0) {
        this.selected01 = this.provinceList[0].id;
        this.prefectureLevelList = this.provinceList.filter(
          province => province.id === this.selected01
        )[0].children;
      }
      if (this.prefectureLevelList.length > 0) {
        this.selected02 = this.prefectureLevelList[0].id;
        this.countyList = this.prefectureLevelList.filter(
          item => item.id === this.selected02
        )[0].children;
      }
      if (this.countyList.length > 0) {
        this.selected03 = this.countyList[0].id;
        this.townList = this.countyList.filter(
          item => item.id === this.selected03
        )[0].children;
      }
      if (this.townList.length > 0) {
        this.selected04 = this.townList[0].id;
      }
    }
  },
  watch: {
    selected01: function() {
      this.prefectureLevelList = [];
      this.countyList = [];
      this.townList = [];
      if (this.provinceList.length > 0) {
        this.prefectureLevelList = this.provinceList.filter(
          item => item.id === this.selected01
        )[0].children;
      }
      if (this.prefectureLevelList.length > 0) {
        this.selected02 = this.prefectureLevelList[0].id;
        this.countyList = this.prefectureLevelList.filter(
          item => item.id === this.selected02
        )[0].children;
      }
      if (this.countyList.length > 0) {
        this.selected03 = this.countyList[0].id;
        this.townList = this.countyList.filter(
          item => item.id === this.selected03
        )[0].children;
      }
      if (this.townList.length > 0) {
        this.selected04 = this.townList[0].id;
      }
    },
    selected02: function() {
      this.countyList = [];
      this.townList = [];
      if (this.prefectureLevelList.length > 0) {
        this.countyList = this.prefectureLevelList.filter(
          item => item.id === this.selected02
        )[0].children;
      }
      if (this.countyList.length > 0) {
        this.selected03 = this.countyList[0].id;
        this.townList = this.countyList.filter(
          item => item.id === this.selected03
        )[0].children;
      }
      if (this.townList.length > 0) {
        this.selected04 = this.townList[0].id;
      }
    },
    selected03: function() {
      this.townList = [];
      if (this.countyList.length > 0) {
        this.townList = this.countyList.filter(
          item => item.id === this.selected03
        )[0].children;
      }
      if (this.townList.length > 0) {
        this.selected04 = this.townList[0].id;
      }
    }
    // selected04:function()  {

    // }
  },
  mounted() {
    this.initData();
  }
};
</script>
<style scoped>
.content-header {
  position: relative;
}
.return-style {
  position: absolute;
  right: 10px;
}
.input-width {
  width: 250px;
}
.bg-purple {
  border-width: 0 !important;
}
.header-style {
  background-color: #f9fafc;
  border-bottom: 2px solid #ccc;
  padding-top: 10px;
}
.border-style {
  border-right: 1px solid #ccc;
  height: 100%;
  border-radius: 0px;
}
.border-style:last-of-type {
  border-right-width: 0;
}
.add-button {
  width: 100%;
  border-style: dashed;
  margin-top: 5px;
}
.el-input--suffix .el-input__inner {
  padding-right: 70px !important;
}
.selected-style {
  background-color: #f9f9f9;
  border-top: 1px solid #0099ff !important;
  border-bottom: 1px solid #0099ff !important;
}
</style>